<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<style>
    *{
       padding: 0;
       margin: 0;
    box-sizing: border-box;
}
    .box{
        background: url(../03-爱宠知识新闻案例★★★★/images/bg.gif);
        width: 400px;
        height: 500px;
        margin: 0 auto;
        }
    #d1{
        height: 35px;
        width: 5px;
        background-color: rgb(179, 247, 76);
        display: inline-block;
        margin-left: 10px;
        margin-top: 20px;
    }
    #d2{
        display: inline-block;
        margin-left: 20px;
        color: white;

    }
    #d3{
        margin-left: 20px;
        margin-top: 10px;
        margin-right: 20px;
        background-color: white;
    }
    #d3 ul li{
        list-style: none;
        border-bottom: 1px dashed black;
        height: 40px;
        line-height: 40px;
        font-size: 14px;
        background-image: url(../03-爱宠知识新闻案例★★★★/images/tb.gif);
        background-repeat: no-repeat;
        background-position: 10px center;
        padding-left: 30px;

    }
    a{
        text-decoration: 0;
    }
</style>
<body>
    <div class="box">
        <div id="d1"></div>
        <div id="d2"><h1>爱宠常识</h1></div>
        <div id="d3">
            <ul>
                <li><a href="">养狗比养猫对健康更有利</a></li>
                <li><a href="#">日本正宗柴犬亮相，你怎么看柴犬</a></li>
                <li><a href="#">狗狗歌曲《新年旺旺》</a></li>
                <li><a href="#">带宠兜风，开车带宠需要注意什么？</a></li>
                <li><a href="#">【爆笑】这狗狗太不给力了</a></li>
                <li><a href="#">狗狗与男童相同着装拍有爱造型照</a></li>
                <li><a href="#">狗狗各个阶段健康大事件</a></li>
                <li><a href="#">调皮宠物狗陷在沙发里的搞笑瞬间</a></li>
                <li><a href="#">为什么每次大小便后，会用脚踢土？</a></li>
            </ul>
        </div>
    </div>
</body>
</html>